<template>
  <ContentWrap>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">会议基础信息</div>
      </div>
      <div class="content_main">
        <el-form 
          ref="formRef" 
          :inline="true" 
          :model="formData.data" 
          :rules="formRules" 
          class="-mb-15px"
          label-width="auto"
        >
          <el-row :gutter="16">
            <el-col :span="12">
              <el-form-item label="会议名称" prop="name">
                <el-input class="formInp" v-model="formData.data.name" clearable placeholder="请输入会议名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会议类型" prop="type">
                <el-select class="formInp" v-model="formData.data.type" clearable placeholder="请选择会议类型">
                  <el-option v-for="item in meetingTypeList" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会议地点" prop="address">
                <el-input class="formInp" v-model="formData.data.address" placeholder="请输入会议地点"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会议人数" prop="number">
                <el-input-number class="formInp" controls-position="right" v-model="formData.data.number" placeholder="请输入会议人数"/>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会议负责人" prop="leaderId">
                <div class="flex-s" style="width: 100%">
                  <div class="coord flex-s formInp mr-12">
                    <span v-if="formData.data.leaderName">{{ formData.data.leaderName }}</span>
                    <span v-else style="color: rgb(159 155 155);">请选择会议负责人</span>
                  </div>
                  <el-button type="primary" @click="addCompanies()">选择负责人</el-button>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会议部门" prop="departmentId">
                <el-tree-select
                  class="formInp"
                  v-model="formData.data.departmentId"
                  :data="deptTree"
                  filterable
                  clearable
                  :props="defaultProps"
                  check-strictly
                  default-expand-all
                  placeholder="请选择会议部门"
                  value-key="deptId"
                />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="会议时间" prop="meetingTime">
                <el-date-picker
                  v-model="formData.data.meetingTime"
                  style="width: 100%"
                  type="date"
                  placeholder="请选择会议时间"
                  @change="e => formData.data.meetingTime = formatDateToYMD(e)"
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </ContentWrap>
  <ContentWrap>
    <div class="content">
      <div class="content_head flex-s">
        <div class="line"></div>
        <div class="title">会议内容</div>
      </div>
      <el-row class="-mb-15px" :gutter="24">
        <el-col :span="24">
          <el-form-item label="会议图片" prop="meetingPhotos">
            <UploadImgs
              v-model="formData.data.meetingPhotos"
              :limit="4"
              :fileSize="20"
              :fileType="['image/jpeg', 'image/png']"
              height="130px"
              width="200px"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会议简述">
            <el-input
              v-model="formData.data.remark"
              type="textarea"
              maxlength="200"
              :autosize="{ minRows: 6}"
              placeholder="请输入会议简述信息"
            />
            <div class="formInp flex-e font-12" style="color: #999;">{{ formData.data.remark.length }}/200</div>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="上传附件">
            <div class="upload_box" style="width: 100%;">
              <UploadFile
                v-model="formData.data.attachment"
                class="upload-demo"
                :fileSize="20"
                :fileType="['jpg', 'png', 'pdf', 'doc', 'docx', 'xls', 'xlsx', 'ppt', 'pptx', 'txt']"
                :limit="10"
              />
            </div>
          </el-form-item>
        </el-col>
      </el-row>
    </div>
  </ContentWrap>
  <ContentWrap class="flex-c">
    <el-button class="!w-80px" type="primary" :loading="loading" @click="submitForm">确定</el-button>
    <el-button class="!w-80px" type="warning" @click="closeForm">取消</el-button>
  </ContentWrap>






    <!-- 勾选数据 -->
  <personalDialog ref="personalDialogRef" @change="personalChange"/>
</template>
<script setup>
  import {ref,reactive} from "vue"
  import { formRules } from './jsonAndRules'
  import { formatDateToYMD } from '@/utils/index'
  import { defaultProps } from '@/utils/tree'
  import personalDialog from './personalDialog.vue'
  import { UploadImgs, UploadFile } from "@/components/UploadFile/index.ts"
  const meetingTypeList = inject('meetingTypeList')
  const goBack = inject('goBack', () => {})
  const deptTree = inject('deptTree')
  const message = useMessage() // 消息弹窗
  const loading = ref(false) // 列表的加载中
  const formRef = ref(null)
  const formData = reactive({
    data: {
      name: '', // 会议名称
      type: '', // 会议类型
      address: '', // 会议地点
      number: null, // 人数
      leaderId: '', // 会议负责人
      leaderName: '', // 会议负责人名称
      departmentId: '', // 会议部门
      meetingTime: '', // 会议时间
      meetingPhotos: [],
      remark: '', // 会议简述
      attachment: [], // 附件
    }
  })

  const init = (id) => {
    
  }
  const personalDialogRef = ref(null)
  const addCompanies = () => {
    personalDialogRef.value.init()
  }
  const personalChange = (data) => {
    const { id, name } = data
    formData.data.leaderId = id
    formData.data.leaderName = name
  }
  const closeForm = () => {
    // 关闭表单弹窗逻辑
    goBack()
  }
  const submitForm = () => {
    const formEl = formRef.value
    console.log(formEl, 'formEl');
    if (!formEl) return
    formEl.validate((valid, fields) => {
      if (valid) {

        console.log(formData.data, valid, '走这里来了？？？');
      }else{
        for(let key in fields){
          message.error(fields[key][0].message)
        }
      }
    })
  }

  defineExpose({ init })
</script>
<style lang="scss" scoped>
.content{
    width: 100%;
    min-height: 80px;
    padding: 6px;
    margin-bottom: 24px;
    // border-right: 1px solid #eee;
    box-sizing: border-box;
    .content_head {
        margin-bottom: 24px;
        .line {
            width: 5px;
            height: 21px;
            background: #50B5FF;
        }
        .title {
            font-size: 18px;
            color: #333;
            margin-left: 12px;
            font-weight: 600;
        }
    }
    .content_main {
        width: 100%;
        padding: 0 32px;
        box-sizing: border-box;
    }
}
::v-deep .el-form-item{
  width: 100%;
}
.coord{
  height: 32px;
  box-sizing: border-box;
  padding: 4px 12px;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  cursor: pointer;
  color: #636660;
  &:hover{
    border-color: #bcbdc0;
  }
}
.cursor_pointer{
  &:hover{
    border-color: rgb(64, 158, 255);
  }
}
.formInp{
  width: 100%;
}
  ::v-deep .el-input-number .el-input__inner {
    text-align: left;
  }
  ::v-deep .el-upload-list.el-upload-list--text{
    overflow-y: scroll;
    height: 120px;
  }
</style>
